<template>
    <dl class="detail-type">
        <dt @click="isShow = !isShow">
            <span class="tit">商品信息</span>
        </dt>
        <el-collapse-transition>
            <dd v-show="isShow" v-loading="loading">
                <el-form ref="form" :rules="rules" :model="form" label-width="120px" label-position="right">
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="名称" prop="name">
                                <el-input v-if="edit" v-model="form.name" maxlength="50" show-word-limit
                                    placeholder="请输入商品名称50个字内" />
                                <span v-else>{{ form.name }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item label="商品分类" prop="cate_ids">
                                <!-- <el-select style="width:260px;" v-if="edit" v-model="form.cateids" placeholder="请选择"
                                        clearable size="small">
                                        <el-option v-for="dict in cateList" :key="dict.id" :label="dict.name"
                                            :value="dict.id" />
                                    </el-select> -->
                                <el-cascader style="width: 600px;" v-if="edit" class="form-item-cascader"
                                    :key="resetCascader" ref="myCascader" v-model="form.cate_ids" placeholder="请选择分类"
                                    :options="cateList" :props="optionProps" @change="handleChange" clearable></el-cascader>
                                <span v-else>{{ form.cate_name }}</span>
                                <!-- form.cateids ? cateList.find(item => item.id == form.cateids).name : null -->
    
                            </el-form-item>
                        </el-col>
                        <el-col :span="20">
                            <el-form-item label="产地" prop="producer_type">
                                <el-radio-group v-model="form.producer_type" v-if="edit">
                                    <el-radio v-for="dict in producerList" :key="dict.dictValue"
                                        :label="Number(dict.dictValue)">{{ dict.dictLabel }}
                                    </el-radio>
                                </el-radio-group>
                                <span v-else>{{ selectDictLabel(producerList, form.producer_type) }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品编号" prop="code">
                                <!-- <el-input v-if="edit" v-model="form.code" placeholder="请输入商品编号" /> -->
                                <span>{{ form.code }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="cover">
                            <el-form-item label="商品封面" prop="cover">
                                <el-upload class="avatar-uploader" :action="$uploadUrl" :show-file-list="false"
                                    :before-upload="beforeUpload" :on-success="handleCoverSuccess">
                                    <img v-if="form.cover" :src="form.cover" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    <!-- <div slot="tip" class="el-upload__tip text-error" v-if="form.type=='0'">请上传图片尺寸为694*209的图片</div>
                                        <div slot="tip" class="el-upload__tip text-error">单文件大小请在1M以内,仅支持JPG、JPEG、PNG格式</div> -->
                                    <div slot="tip" class="el-upload__tip text-error">请上传图片大小在500KB以内，尺寸为750*600的图片</div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
    
                        <el-col>
                            <el-form-item label="缩略图" prop="slider0" v-if="edit">
                                <!--  -->
                                <el-upload list-type="picture-card" :file-list="fileList"
                                    :before-upload="beforeUploadAvatar" :on-change="onchange" :limit="15"
                                    :on-exceed="masterFileMax" :class="{ hide: hideUploadBtn }" :action="$uploadUrl"
                                    :on-success="(res, file) => handleAvatarSuccess(res, file)" v-if="edit">
                                    <i slot="default" class="el-icon-plus"></i>
                                    <div slot="file" slot-scope="{file}">
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                        <span class="el-upload-list__item-actions">
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                style="font-size: small;" @click="handleFirst(file)">设为首图
                                                <!-- <i class="el-icon-download"></i> -->
                                            </span>
                                            <span class="el-upload-list__item-preview"
                                                @click="handlePictureCardPreview(file)">
                                                <i class="el-icon-zoom-in"></i>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleRemove(file)">
                                                <i class="el-icon-delete"></i>
                                            </span>
                                        </span>
                                    </div>
                                    <div slot="tip" class="el-upload__tip text-error">请上传图片大小在500KB以内，尺寸为16:9的图片</div>
                                    <div slot="tip" class="el-upload__tip">最多只能上传15张图片</div>
                                    <!-- <img v-if="form.thumb" :src="form.avatar" class="avatar"> -->
                                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                                </el-upload>
    
                                <el-dialog :visible.sync="dialogVisible" title="图片预览">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                            <el-form-item v-else prop="slider" label="缩略图">
                                <el-image v-for="url in form.slider" :key="url"
                                    style="width: 150px; height: 150px;border:1px solid #eee;margin-right: 10px;" :src="url"
                                    :preview-src-list="[url]">
                                </el-image>
                            </el-form-item>
                            <!-- <el-form-item label="缩略图" prop="thumbs">
                                        <img-update v-bind:imgUrl.sync="form.dialogImageUrl" v-bind:imgFile.sync="form.thumbs" :multiple="true" ></img-update>
                                    </el-form-item> -->
                        </el-col>
    
                        <el-col :span="24">
                            <el-form-item label="推荐人获赠金币" prop="recom_coin">
                                <el-input style="width: 215px;" v-if="edit" v-model="form.recom_coin" placeholder="请输入" />
                                <span v-else>{{ form.recom_coin }}</span>
                            </el-form-item>
                        </el-col>
    
                        <!-- <el-col :span="8">
                                <el-form-item label="是否支持一件代发" prop="subst_shipment" label-width="150px">
                                    <el-radio-group v-model="form.subst_shipment" v-if="edit">
                                        <el-radio v-for="dict in yesNo" :key="dict.dictValue" :label="Number(dict.dictValue)">{{ dict.dictLabel }}
                                        </el-radio>
                                    </el-radio-group>
                                    <span v-else>{{ selectDictLabel(yesNo, form.subst_shipment) }}</span>
                                </el-form-item>
                            </el-col> -->
    
                        <el-col :span="24">
                            <div class="goods-spec">
                                <span class="tit mb20">商品规格</span>
                            </div>
                            <div class="goods-container" v-for="(attr, index) in privateGoodsItem" :key="index">
                                <div class="goods-content">
                                    <div class="goods-content-box">
                                        <div class="goods-content-left">
                                            <el-form label-width="80px" style="width:400px">
                                                <el-form-item label="规格名">
                                                    <el-input v-if="edit" v-model="attr.privateSpecName"
                                                        placeholder="请输入规格名">
                                                    </el-input>
                                                    <span v-else>{{ attr.privateSpecName }}</span>
                                                </el-form-item>
                                                <el-form-item label="规格值">
                                                    <template v-if="edit">
                                                        <el-tag v-for="tag in attr.dynamicTags" :key="tag" closable
                                                            :disable-transitions="false" @close="handleClose(tag, attr)">
                                                            {{ tag }}
                                                        </el-tag>
                                                    </template>
                                                    <template v-else>
                                                        <el-tag v-for="tag in attr.dynamicTags" :key="tag">
                                                            {{ tag }}
                                                        </el-tag>
                                                    </template>
                                                    <el-input class="input-new-tag" v-if="attr.inputVisible"
                                                        v-model="attr.inputValue" :ref="`saveTagInput${index}`" size="small"
                                                        @keyup.enter.native="handleInputConfirm(attr.inputValue, attr)"
                                                        @blur="handleInputConfirm(attr.inputValue, attr)">
                                                    </el-input>
                                                    <template v-if="edit">
                                                        <el-button class="button-new-tag" size="small"
                                                            @click="showInput(attr, index)">+
                                                            添加
                                                        </el-button>
                                                    </template>
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                        <div class="goods-content-right" v-if="edit">
                                            <el-link type="danger" @click="delPrivateSpec(index)">删除规格</el-link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- v-if="handleShow == 'add'" -->
                            <div class="goods-spec" v-if="edit">
                                <span></span>
                                <el-link type="primary" @click="addPrivateSpec" class="goods-spec-add">添加规格</el-link>
                            </div>
                            <p class="tit mb20">规格参数 </p>
                            <el-table ref="multipleTable" :data="tableColumnList.tableBodyList" stripe tooltip-effect="dark"
                                style="width: 100%;margin-top:1%;">
                                <el-table-column :label="item.propName" :property="item.prop"
                                    v-for="item in tableColumnList.tableHeaderList" :key="item.prop" align="center">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row[scope.column.property] }}</span>
                                    </template>
                                </el-table-column>
    
                                <el-table-column label="销售价格（元）">
                                    <template slot="header" slot-scope="scope">
                                        <span class="mgrinr1">销售价格（元）</span>
                                        <el-button v-if="edit" size="mini"
                                            @click="batchPrice(scope.column)">批量修改</el-button>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-input v-if="edit" v-model="scope.row.price_selling"
                                            @keyup.native="scope.row.price_selling = onInput(scope.row.price_selling)">
                                        </el-input>
                                        <span v-else>{{ scope.row.price_selling }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="市场价格（元）">
                                    <template slot="header" slot-scope="scope">
                                        <span class="mgrinr1">市场价格（元）</span>
                                        <el-button v-if="edit" size="mini"
                                            @click="batchPrice(scope.column)">批量修改</el-button>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-input v-if="edit" v-model="scope.row.price_market"
                                            @keyup.native="scope.row.price_market = onInput(scope.row.price_market)">
                                        </el-input>
                                        <span v-else>{{ scope.row.price_market }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="虚拟销量">
                                    <template slot="header" slot-scope="scope">
                                        <span class="mgrinr1">虚拟销量（个）</span>
                                        <el-button v-if="edit" size="mini"
                                            @click="batchPrice(scope.column)">批量修改</el-button>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-input v-if="edit" v-model="scope.row.number_virtual"
                                            @keyup.native="scope.row.number_virtual = onInput(scope.row.number_virtual)">
                                        </el-input>
                                        <span v-else>{{ scope.row.number_virtual }}</span>
                                    </template>
                                </el-table-column>
    
                                <el-table-column label="销售状态" align="center">
                                    <template slot="header" slot-scope="scope">
                                        <span class="mgrinr1">销售状态</span>
                                        <!-- <el-button v-if="edit" size="mini"
                                                @click="batchPrice(scope.column)">批量修改价格</el-button> -->
                                    </template>
                                    <template slot-scope="scope">
                                        <el-checkbox v-if="edit" v-model="scope.row.status"></el-checkbox>
                                        <el-checkbox v-else v-model="scope.row.status" disabled></el-checkbox>
                                    </template>
                                </el-table-column>
                            </el-table>
    
                            <el-dialog title="批量修改" :visible.sync="batchShow" width="500px" append-to-body
                                @close="formPrice = {}; batchShow = false" :close-on-click-modal="false">
                                <el-form ref="formPrice" :model="formPrice" label-width="90px">
                                    <!-- :rules="ruless"  @change='change()'-->
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item prop="price_selling" label="销售价格">
                                                <el-input v-model="formPrice.price_selling" placeholder="请输入"
                                                    @keyup.native="formPrice.price_selling = onInput(formPrice.price_selling)" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="24">
                                            <el-form-item prop="price_market" label="市场价格">
                                                <el-input v-model="formPrice.price_market" placeholder="请输入"
                                                    @keyup.native="formPrice.price_market = onInput(formPrice.price_market)" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="24">
                                            <el-form-item prop="number_virtual" label="虚拟销量">
                                                <el-input v-model="formPrice.number_virtual" placeholder="请输入"
                                                    @keyup.native="formPrice.number_virtual = onInput(formPrice.number_virtual)" />
                                            </el-form-item>
                                        </el-col>
                                        <!-- <el-col :span="24">
                                                <el-form-item prop="price"  label="价格">
                                                    <el-input v-model="formPrice.price" placeholder="请输入"
                                                        @keyup.native="formPrice.price = onInput(formPrice.price)" />
                                                </el-form-item>
                                            </el-col> -->
                                    </el-row>
                                </el-form>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="formPrice = {}; batchShow = false">取 消</el-button>
                                    <el-button type="primary" @click="submitPrice">确 定</el-button>
                                </span>
                            </el-dialog>
                        </el-col>
    
                        <el-col :span="24">
                            <div class="goods-spec">
                                <span class="tit mb20">商品描述</span>
                            </div>
                            <!-- <el-form-item label="描述" prop="remark">
                                    <el-input v-if="edit" v-model="form.remark" placeholder="请输入" type="textarea" />
                                    <span v-else>{{ form.remark }}</span>
                                </el-form-item> -->
                            <el-form-item label="详情" prop="content">
                                <editor v-if="edit" v-model="form.content" placeholder="请输入详情" :height="200" />
                                <template v-else>
                                    <span v-html="form.content"></span>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </dd>
        </el-collapse-transition>
    </dl>
</template>

<script>
import { getGoodsCateLists } from "@/api/goods/goods"
// import { isvalidatemobile } from "@/utils/validate";
import { saleStatus, yesNo } from "@/api/dictionary.js"
// import { getCateListsAll } from "@/api/product/category.js"
// import { getGoodsListsAll } from "@/api/dataManage/productStatus.js"
// import { getGoodsChannelListsAll } from "@/api/dataManage/goodsChannel.js"
// import { getCustomerListsAll } from "@/api/customer/index.js"
// import { getDepartListsAll } from "@/api/dataManage/supplyDepart.js"
// import { getBrandLists, getStaffLists } from "@/api/product/goods.js"
import imgUpdate from "@/components/imgUpdate/index"
import editor from '@/components/Editor/index'
export default {
    name: '',
    props: {
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        data: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    components: {
        editor,
        imgUpdate
    },
    data() {
        return {
            loading: false,
            isShow: true,
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            yesNo: yesNo,
            content: '',
            plus: false,
            hideUploadBtn: false,
            fileList: [],
            picturesList: [],
            brandsList: [],
            editorOption: {
                placeholder: '请输入详情'
            },
            limit: '15',
            inputVisible: false,
            inputValue: '',
            form: {
                slider: [],
                slider0: '',
                cate_ids: [],
                cateids: '',
                cover: '',
                producer_type: 0
            },
            cateList: [],
            optionProps: {
                value: 'id',
                label: 'name',
                disabled: "disabled",
                children: 'children',
                emitPath: true,
                // lazy: true,
                // lazyLoad: (node, resolve) => {
                //     const { level, value } = node; // 获取当前node对象中的level, value属性
                //     this.getArea(level, value, resolve)
                // }
            },
            resetCascader: 0,
            channelList: [],
            companyList: [],
            staffList: [],
            rules: {
                name: [{ required: true, message: "请输入商品名称", trigger: "blur" },],
                cate_ids: [{ required: true, message: "请选择商品种类", trigger: "change" }],
                // remark: [{ required: true, message: "请输入商品描述", trigger: "blur" },],
                content: [{ required: true, message: "请输入商品详情", trigger: "blur" },],
                cover: [{ required: true, message: "请上传缩略图", trigger: "blur" },],
                slider0: [{ required: true, message: "请上传缩略图", trigger: "blur" },],
                // goods_price: [{ required: true, message: "请输入产品价格", trigger: "blur" },],
                // agent_price: [{ required: true, message: "请输入代理商价格", trigger: "blur" },],
                // purchase_price: [{ required: true, message: "请输入进货价格", trigger: "blur" },],
                // content: [{ required: true, message: "请填写详情", trigger: "blur" },],
            },
            // ruless: {
            //     price: [{ required: true, message: '请输入', trigger: 'change' }],
            // },
            edit: this.handleShow == "detail" ? false : true,
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            statusList: saleStatus,
            // saleStatusList: saleStatus,
            supplyDepart: [],
            // labelList: [
            //     { id: 1, name: "企业内容" },
            //     { id: 2, name: "企业cms" },
            //     { id: 3, name: "333333" },
            //     { id: 4, name: "444444" },
            // ],  
            tableColumnList: {
                tableHeaderList: [],
                tableBodyList: []
            },
            privateGoodsItem: [
                {
                    privateSpecName: '', //规格名
                    dynamicTags: [], //规格值数组
                    inputVisible: false,
                    inputValue: ''
                }
            ],
            batchShow: false,
            formPrice: {
                // price: null
            },
            // rules: {
            //     price: [{ required: true, message: '请输入', trigger: 'change' }],
            // },
            producerList: [
                { dictValue: 0, dictLabel: "中国" },
                { dictValue: 1, dictLabel: "日本" },
                { dictValue: 99, dictLabel: "其他国家" },
            ]
        }
    },
    watch: {
        calculateAttribute(newVal) {
            let cloneNewVal = JSON.parse(JSON.stringify(newVal))
            let attrName = [] //规格名数组
            let attrValue = [] //规格值数组
            for (let key in cloneNewVal) {
                attrName.push(key)
                attrValue.push(cloneNewVal[key])
            }
            // 表格内容数据（笛卡尔积算法）
            let finalArr = this.cartesianProductOf(...attrValue)

            console.log(finalArr, '123')

            let tableObj = {
                tableBodyList: [],
                tableHeaderList: []
            }
            // 表格内容
            tableObj.tableBodyList = finalArr.map((item) => {
                let obj = {
                    // 初始化默认值
                    price_market: 0,
                    price_selling: 0,
                    number_virtual: 0,
                    status: true,
                    stock: 0,
                    sku: null,
                }
                for (let i = 0; i < item.length; i++) {
                    obj[attrName[i]] = item[i]
                }
                // 如果已有值，不重置字段
                if (this.handleShow === "edit") {
                    let existingItem = this.tableColumnList.tableBodyList.find((element) => {
                        return attrName.every((key) => {
                            return element[key] === obj[key]
                        })
                    })
                    if (existingItem) {
                        obj.price_market = existingItem.price_market
                        obj.price_selling = existingItem.price_selling
                        obj.number_virtual = existingItem.number_virtual
                        obj.status = existingItem.status
                        obj.stock = existingItem.stock
                        obj.sku = existingItem.sku
                    }
                }
                return obj
            })
            this.tableColumnList.tableBodyList = tableObj.tableBodyList //表格内容数据

            // 表头
            let skuTableArr = Object.keys(newVal)
            tableObj.tableHeaderList = skuTableArr.map((item) => {
                return {
                    prop: item,
                    propName: item
                }
            })
            this.tableColumnList.tableHeaderList = tableObj.tableHeaderList // 表头
        }
    },
    computed: {

        // 计算规格
        calculateAttribute() {
            // 初始化
            let obj = {}
            this.privateGoodsItem.forEach((item) => {
                // 判断有没有输入规格名
                if (item.privateSpecName) {
                    //规格名:规格值     //'颜色':'尺寸'
                    obj[item.privateSpecName] = item.dynamicTags
                }
            })
            return obj
        }
    },
    created() {
        // this.getList()
        let fun = [
            getGoodsCateLists(),
        ]
        Promise.all(fun).then(res => {
            this.cateList = res[0].data
            this.cateList.forEach(e => {
                if (e.children) {
                    e.disabled = false
                } else {
                    e.disabled = true
                }
            });
            if (this.data) {
                console.log(this.data, "表单数据")
                this.form = { ...this.form, ...this.data }
                this.form.cate_ids = this.data.cateids.split(',').map(Number)
                console.log(this.form.cate_ids, '分类')
                if (this.form.slider.length > 0) {
                    for (let i = 0; i < this.form.slider.length; i++) {
                        let url = this.form.slider[i]
                        this.fileList.push({
                            'url': url
                        })
                        console.log(this.fileList, '编辑图片')
                    }
                    this.picturesList = this.form.slider
                    this.form.slider0 = this.picturesList.length > 0 ? this.picturesList.join("|") : null
                }
                if (this.form.slider.length >= 15) {
                    this.hideUploadBtn = true
                }
                let objA = {
                    tableHeaderList: [],
                    tableBodyList: []
                }
                let objB = [
                    {
                        privateSpecName: '', //规格名
                        dynamicTags: [], //规格值数组
                        inputVisible: false,
                        inputValue: ''
                    }
                ]
                this.tableColumnList = this.form.table_column ? JSON.parse(this.form.table_column) : objA
                this.privateGoodsItem = this.form.private_goods ? JSON.parse(this.form.private_goods) : objB
                console.log(this.tableColumnList.tableBodyList, '表格内容')
                console.log(this.form.item, 'sku')
                this.tableColumnList.tableBodyList.forEach((e, index) => {
                    e.sku = this.form.items.length > 0 ? this.form.items[index].goods_sku : ''
                });
                let Arry = [{ name: '', }]
                // this.form.lightList = this.data.charact && this.data.charact.length > 0 ? this.data.charact : Arry
                // this.form.supplyDepartList = this.data.depar_ids ? this.data.depar_ids.split(",") : []
                // this.$set(this.form, "code", this.data.code)

            }
        })
    },
    methods: {

        beforeUpload(file) {
            return new Promise((resolve, reject) => {

                const isLt2M = file.size / 1024 / 1024 < 0.5;
                if (!isLt2M) {  // 限制文件大小
                    this.$message.warning(`当前限制文件大小不能大于0.5M`)
                    return reject(false)
                }
                this.limitFileWH(750, 600, file).then((res) => {
                    file.isFlag = res
                    if (file.isFlag) {
                        return resolve(true)
                    } else {
                        return reject(false)
                    }
                })
            })
        },
        beforeUploadAvatar(file) {
            return new Promise((resolve, reject) => {

                const isLt2M = file.size / 1024 / 1024 < 0.5;
                if (!isLt2M) {  // 限制文件大小
                    this.$message.warning(`当前限制文件大小不能大于0.5M`)
                    return reject(false)
                }
                this.limitFileRate(16, 9, file).then((res) => {
                    file.isFlag = res
                    if (file.isFlag) {
                        return resolve(true)
                    } else {
                        return reject(false)
                    }
                })
            })
        },
        handleChange(id) {
            console.log(id, '00000');
            this.form.cateids = this.form.cate_ids[1]
            console.log(this.form.cateids, '00000');
        },
        masterFileMax(files, fileList) {
            this.$message.warning(`请最多上传 ${this.limit} 个文件。`);
        },
        beforeUploadCcover(file, fileList) {
            return new Promise((resolve, reject) => {
                if (file.size / (1024 * 1024) > 0.5) {  // 限制文件大小
                    this.$message.warning(`当前限制文件大小不能大于0.5M`)
                    return reject(false)
                } else {
                    resolve(true)
                }
            })
        },
        handleCoverSuccess(res, file) {
            console.log(res, "resss")
            this.$set(this.form, 'cover', res.data[0].fileurl)
            console.log(this.form.cover, "covercovercover")
        },


        handleAvatarSuccess(res, file) {
            console.log(res.data[0].fileurl, 'res')
            let url = res.data[0].fileurl
            this.fileList.push({
                'url': url
            })
            console.log("上传成功的钩子", this.fileList)
            if (this.fileList.length >= 15) {
                this.hideUploadBtn = true
            }
            this.picturesList = this.form.slider
            this.picturesList.push(res.data[0].fileurl)
            console.log(this.picturesList, '图片列表')
            this.form.slider0 = this.picturesList.length > 0 ? this.picturesList.join("|") : null
            console.log(this.form.slider0, "传参")
            // this.form.cover = this.picturesList[0]
            // console.log("上传成功的钩子", file);
        },
        // beforeRemove(file, fileList) {
        //     if (file) {
        //         return this.$confirm(`确定移除 ${file.name}？`)
        //     }
        // },
        onchange(file, fileList) {
            console.log("上传成功", file, fileList);
            if (this.fileList.length >= 15) {
                this.hideUploadBtn = true
            }
            console.log(this.form.slider, '++++')
            // this.$set(this.form, 'thumbs', fileList)
            this.form.slider0 = this.picturesList.length > 0 ? this.picturesList.join("|") : null
            console.log(this.form.slider0, "传参")
            // this.form.cover = this.picturesList[0]
        },
        handleRemove(file, fileList) {
            this.picturesList = this.form.slider
            this.picturesList.splice(this.fileList.indexOf(file), 1);
            this.fileList.splice(this.fileList.indexOf(file), 1);
            console.log(this.fileList)
            if (this.fileList.length >= 15) {
                this.hideUploadBtn = true
            } else { this.hideUploadBtn = false }
            console.log(this.picturesList, 'remove')
            this.form.slider0 = this.picturesList.length > 0 ? this.picturesList.join("|") : null
            console.log(this.form.slider0, "传参")
            // this.form.cover = this.picturesList[0]
            // if (this.picturesList.length = 0) {
            //     this.form.cover = ''
            // }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        handleFirst(file, index) {
            console.log(file);
            const objFirst = {
                name: file.name,
                percentage: file.percentage,
                raw: file.raw,
                size: file.size,
                status: file.status,
                uid: file.uid,
                url: file.url
            }
            console.log(this.fileList, '-----')
            this.fileList.unshift(objFirst)
            var index = this.fileList.indexOf(file)
            if (index !== -1) {
                this.picturesList = this.form.slider
                this.picturesList.unshift(this.picturesList[index - 1])
                this.picturesList.splice(index, 1)
                this.fileList.splice(index, 1)
            }
            console.log(this.picturesList, 'first')
            this.form.slider0 = this.picturesList.length > 0 ? this.picturesList.join("|") : null
            console.log(this.form.slider0, "传参")
            // this.form.cover = this.picturesList[0]
        },
        // addLight(index, item) {
        //     this.form.lightList.push({ name: '' })
        //     console.log(JSON.stringify(this.form.lightList), 'row')
        // },
        // reduced(index) {
        //     this.form.lightList.splice(index, 1)
        // },
        // addFeature() {
        //     this.form.itemsList.push({ name: '', content: '' })
        //     console.log(JSON.stringify(this.form.itemsList), 'row')

        // },
        // deleteFeature(k, item) {
        //     this.form.itemsList.splice(k, 1)
        //     console.log(JSON.stringify(this.form.itemsList), 'row')
        // },
        onEditorChange({ editor, html, text }) {
            this.form.content = html;
            // console.log(this.form.content)
        },
        handleClose(tag) {
            this.form.labels.splice(this.form.labels.indexOf(tag), 1);
        },
        // showInput() {
        //     this.inputVisible = true;
        //     this.$nextTick(_ => {
        //         this.$refs.saveTagInput.$refs.input.focus();
        //     });
        // },
        handleInputConfirm() {
            if (this.form.labels == null) {
                this.form.labels = []  //如果没有数据，设为数组
            }
            let inputValue = this.inputValue;
            if (inputValue) {
                this.form.labels.push(inputValue);
                console.log(this.form.labels, '标签列表')
            }
            this.inputVisible = false;
            this.inputValue = '';
        },

        batchPrice(row) {
            console.log(this.tableColumnList.tableBodyList, 222)
            this.tableColumnList.tableBodyList.forEach(e => {
                this.$set(this.formPrice, 'price_selling', e.price_selling)
                this.$set(this.formPrice, 'price_market', e.price_market)
                this.$set(this.formPrice, 'number_virtual', e.number_virtual)
                console.log(this.formPrice, "this.formPrice")
            });
            this.batchShow = true
        },
        // change() {
        //     this.$forceUpdate();
        // },
        submitPrice() {
            this.$refs.formPrice.validate((valid) => {
                if (valid) {
                    console.log(this.tableColumnList, 111)
                    this.tableColumnList.tableBodyList.forEach(e => {
                        // e.price = this.formPrice.price;
                        e.price_selling = this.formPrice.price_selling;
                        e.price_market = this.formPrice.price_market;
                        e.number_virtual = this.formPrice.number_virtual;
                    });
                    this.formPrice = {}
                    this.batchShow = false
                }
            });
        },
        // 添加规格
        addPrivateSpec(index) {
            this.privateGoodsItem.push({
                privateSpecName: '',
                dynamicTags: [],
                inputVisible: false,
                inputValue: ''
            })
        },
        delPrivateSpec(index) {
            this.privateGoodsItem.splice(index, 1)
        },
        handleInputConfirm(val, attr) {
            if (val) {
                attr.dynamicTags.push(val)
            }
            attr.inputVisible = false
            attr.inputValue = ''
        },
        handleClose(tag, item) {
            item.dynamicTags.splice(item.dynamicTags.indexOf(tag), 1)
        },
        showInput(attr, index) {
            attr.inputVisible = true
            this.$nextTick((_) => {
                console.log(this.$refs[`saveTagInput${index}`], 1)
                this.$refs[`saveTagInput${index}`][0].$refs.input.focus()
            })
        },
        // 笛卡尔积算法
        cartesianProductOf(...args) {
            return args.reduce(
                (total, current) => {
                    let ret = []
                    total.forEach((a) => {
                        current.forEach((b) => {
                            ret.push(a.concat([b]))
                        })
                    })
                    return ret
                },
                [[]]
            )
        },
    },
}

</script>
<style scoped lang='scss'>
.flex {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.d8 {
    color: #0d80ff;
    font-size: 30px;
    font-weight: 600;
    margin-left: 20px;
    cursor: pointer;
}

.red {
    color: red;
    font-size: 30px;
    margin-left: 20px;
    cursor: pointer;
}

.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}

// 隐藏上传组件
::v-deep .hide .el-upload--picture-card {
    display: none;
}

.goods-spec {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;

    .goods-spec-add {
        margin-right: 15px;
    }
}

.goods-container .button-new-tag {
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.goods-container .input-new-tag {
    width: 90px;
    margin-right: 10px;
    vertical-align: bottom;
}

.goods-container .el-tag {
    margin-right: 10px;
}

.goods-container .goods-content {
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #fcfcfc;
}

.goods-content .goods-content-box {
    display: flex;
    align-items: center;
}

.goods-content-box .goods-content-left {
    flex: 1;
}

.cover {
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 100px;
        height: 100px;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        /* text-align: center;
    display: block !important; */
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
}
</style>